import React, { useRef, useEffect } from 'react';
import * as echarts from 'echarts';
import styles from './index.less';

type EChartsOption = echarts.EChartsOption;

export default function ColumnarBody(prors: any) {
  const { feedShiftDutyCondition } = prors;
  let option: EChartsOption;
  const lineRef = useRef<HTMLDivElement>(null);
  let myChart: any;
  const initChart = () => {
    if (myChart != null && myChart != undefined) {
      myChart.dispose();
    }
    myChart = echarts.init(lineRef.current!);
    // myChart.clear()
    // const arr: any = [
    //   '10月5',
    //   '10月6',
    //   '10月7',
    //   '10月8',
    //   '10月9',
    //   '10月10',
    //   '10月11',
    // ];
    // const arr1: any = [700, 1500, 1800, 600, 1200, 1500, 500];
    // const arr2: any = [1100, 400, 1100, 1000, 1700, 1100, 300];
    const arr: any = feedShiftDutyCondition?.xlist;
    const arr1: any = feedShiftDutyCondition?.ylist?.map((item: any) => {
      return item.todaySoft;
    });
    const arr2: any = feedShiftDutyCondition?.ylist?.map((item: any) => {
      return item.todayHard;
    });
    option = {
      backgroundColor: '',
      color: ['#178FFF', '#12FFDA'],
      legend: {
				left: 20,
				top: 0,
        data: ['软颗粒', '硬颗粒'],
        textStyle: {
          color: '#fff',
        },
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow',
        },
      },
      grid: {
        left: '3%',
        right: '8%',
        bottom: '5%',
        top: '20%',
        containLabel: true,
      },
      xAxis: {
        axisLine: {
          lineStyle: {
            width: 0.1,
            color: '#7EA7BA',
						type: 'dotted'
          },
        },
        type: 'category',
        data: arr,
      },
      yAxis: {
        axisLine: {
          lineStyle: {
            width: 0.1,
            color: '#9BB7EF',
          },
        },
        type: 'value',
        boundaryGap: [0, 0.01],
      },
      series: [
        {
          name: '软颗粒',
          type: 'bar',
          data: arr1,
					barWidth: 20,
					itemStyle: {
						normal: {
							barBorderRadius: [10,10,10,10],
							color: new echarts.graphic.LinearGradient(
							0,0,0,1,[
								{offset: 0, color: '#178FFF'},
								{offset: 1, color: '#0351CE'}
							])
						},
					},
        },
        {
          name: '硬颗粒',
          type: 'bar',
          data: arr2,
					barWidth: 20,
					itemStyle: {
						normal: {
							barBorderRadius: [10,10,10,10],
							color: new echarts.graphic.LinearGradient(
							0,0,0,1,[
								{offset: 0, color: '#12FFDA'},
								{offset: 1, color: '#01A799'}
							])
						},
					},
        },
      ],
    };
    option && myChart.setOption(option);
  };
  useEffect(() => {
    if (feedShiftDutyCondition?.xlist?.length > 0) {
      initChart();
    }
  }, [feedShiftDutyCondition]);
  return <div ref={lineRef} className={`${styles.lineBox} bgColor`}></div>;
}
